<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Highcharts Example</title>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script type="text/javascript">
		$(function () {
			$('#container').highcharts({
				chart: {
					type: 'column'
				},
				title: {
					text: 'Efficiency Optimization by Branch'
				},
				xAxis: {
					categories: [
						'Seattle HQ',
						'San Francisco',
						'Tokyo'
					]
				},
				yAxis: [{
					min: 0,
					title: {
						text: 'Employees'
					}
				}, {
					title: {
						text: 'Profit (millions)'
					},
					opposite: true
				}],
				legend: {
					shadow: false
				},
				tooltip: {
					shared: true
				},
				plotOptions: {
					column: {
						grouping: false,
						shadow: false,
						borderWidth: 0
					}
				},
				series: [{
					name: 'Employees',
					color: 'rgba(165,170,217,1)',
					data: [150, 73, 20],
					pointPadding: 0.3,
					pointPlacement: -0.2
				}, {
					name: 'Employees Optimized',
					color: 'rgba(126,86,134,.9)',
					data: [140, 90, 40],
					pointPadding: 0.4,
					pointPlacement: -0.2
				}, {
					name: 'Profit',
					color: 'rgba(248,161,63,1)',
					data: [183.6, 178.8, 198.5],
					tooltip: {
						valuePrefix: '$',
						valueSuffix: ' M'
					},
					pointPadding: .3,
					pointPlacement: 0.2,
					yAxis: 1
				}, {
					name: 'Profit Optimized',
					color: 'rgba(186,60,61,.9)',
					data: [203.6, 198.8, 208.5],
					tooltip: {
						valuePrefix: '$',
						valueSuffix: ' M'
					},
					pointPadding: .4,
					pointPlacement: 0.2,
					yAxis: 1
				}]
			});
		});
	</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

</body>
</html>
